<!doctype html>
<html lang="en">
<head>
    <style>
        body {
            /*background-image: url(./img/bg.jpg);*/
            /*height: 100%;*/
            /*width: 100%;*/
            /*background-size:cover;*/
            background-color: #d3e6f6;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排班</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="recommend-list" style="margin: 20px">
    <div id="title" align="center" style="margin: 20px">海子排班v1.0测试版 O^O</div>
    <div align="center">
        <input id="file" type="file">
        <button style="cursor:pointer;" onclick="importExcel()">导 入</button>
        <button style="cursor:pointer" onclick="query()">查 询</button>
        <button style="cursor:pointer" onclick="plan()">排 班</button>
        <button style="cursor:pointer" onclick="countAll()">统计总数</button>
        <button style="cursor:pointer" onclick="countDay()">统计白夜班数</button>
    </div>
    <div align="center" style="margin: 20px">日志：<span id="warning"></span></div>
    <div>
        <!--    白夜班    -->
        <table id="tab3" border="1" style="float:left;">
            <thead>
            <tr>
                <th style="width: 100px">人员</th>
                <th style="width: 100px">值班类型</th>
                <th style="width: 100px">总值班数</th>
            </tr>
            </thead>
            <tbody id="TbData3" style="text-align: -webkit-center;"></tbody>
        </table>
        <!--    值班表    -->
        <table id="tab" border="1" style="float:left;margin-left: 10%;margin-bottom: 50px;">
            <thead>
            <tr>
                <th style="width: 200px">日期</th>
                <th style="width: 100px">人员</th>
                <th style="width: 100px">白班</th>
                <th style="width: 100px">人员</th>
                <th style="width: 100px">晚班</th>
            </tr>
            </thead>
            <tbody id="TbData" style="text-align: -webkit-center;"></tbody>
        </table>
        <!--    总值班数    -->
        <table id="tab2" border="1" style="float:right;">
            <thead>
            <tr>
                <th style="width: 100px">人员</th>
                <th style="width: 100px">总值班数</th>
            </tr>
            </thead>
            <tbody id="TbData2" style="text-align: -webkit-center;"></tbody>
        </table>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    window.onload = query();
    window.onload = countAll();
    window.onload = countDay();

    //查询函数
    function query() {
        document.getElementById("warning").innerHTML = "查询中,请稍等...";
        $.ajax({
            url: "/plan",
            dataType: "json",
            type: "get",
            success: function (result) {
                $("#TbData").empty();
                for (var i = 0; i < result.data.length; i++) {
                    var fileTable = result.data[i];
                    var $trTemp = $("<tr></tr>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.day + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.lightName + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.light + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.nightName + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.night + "</td>");
                    $("#TbData").append($trTemp);
                    $trTemp.appendTo("#TbData");
                }
                document.getElementById("warning").innerHTML = "查询成功!";

            },
            error: function (data) {
                document.getElementById("warning").innerHTML = "请求出错!";
                // alert("请求出错");
            }
        })
    };

    // 导入函数
    function importExcel() {
        document.getElementById("warning").innerHTML = "导入中,请稍等...";
        var formData = new FormData();
        formData.append("file", document.getElementById("file").files[0]);
        console.log(file);
        $.ajax({
            url: "/plan/import",
            dataType: "json",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function (result) {
                // alert(result.msg);
                // query();
                document.getElementById("warning").innerHTML = "导入成功!";
            },
            error: function (data) {
                // alert("重置失败!");
                document.getElementById("warning").innerHTML = "导入失败!";
            }
        })
    };

    // 排班函数
    function plan() {
        document.getElementById("warning").innerHTML = "排班中,请稍等...";
        $.ajax({
            url: "/plan/schedule",
            dataType: "json",
            type: "get",
            success: function (result) {
                // alert(result.msg);
                // query();
                document.getElementById("warning").innerHTML = "排班成功!";
            },
            error: function (data) {
                // console.log(data);
                // alert("排班失败!");
                document.getElementById("warning").innerHTML = "排班失败!";
            }
        })
    }


    //统计人员值班总数
    function countAll() {
        document.getElementById("warning").innerHTML = "查询中,请稍等...";
        $.ajax({
            url: "plan/count/all",
            dataType: "json",
            type: "get",
            success: function (result) {
                $("#TbData2").empty();
                for (var i = 0; i < result.data.length; i++) {
                    var fileTable = result.data[i];
                    var $trTemp = $("<tr></tr>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.userName + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.count + "</td>");
                    $("#TbData").append($trTemp);
                    $trTemp.appendTo("#TbData2");
                }
                document.getElementById("warning").innerHTML = "查询成功!";
            },
            error: function (data) {
                document.getElementById("warning").innerHTML = "请求出错!";
                // alert("请求出错");
            }
        })
    };

    //统计人员白夜班值班数
    function countDay() {
        document.getElementById("warning").innerHTML = "查询中,请稍等...";
        $.ajax({
            url: "plan/count/people",
            dataType: "json",
            type: "get",
            success: function (result) {
                $("#TbData3").empty();
                for (var i = 0; i < result.data.length; i++) {
                    var fileTable = result.data[i];
                    var $trTemp = $("<tr></tr>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.userName + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.type + "</td>");
                    $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable.count + "</td>");
                    $("#TbData3").append($trTemp);
                    $trTemp.appendTo("#TbData3");
                }
                document.getElementById("warning").innerHTML = "查询成功!";
            },
            error: function (data) {
                document.getElementById("warning").innerHTML = "请求出错!";
                // alert("请求出错");
            }
        })
    };

</script>
<style type="text/css">

</style>